import React, { useState } from 'react';
import { Card, Space, Button, message, Form, Input, Divider } from 'antd';
import { PageContainer } from '@ant-design/pro-components';
import type { UploadFile } from 'antd/es/upload/interface';
import ImageUpload from '@/components/ImageUpload';

/**
 * 图片上传示例页面
 */
const ImageUploadExample: React.FC = () => {
  // 表单实例
  const [form] = Form.useForm();
  // 单图上传文件列表
  const [singleFile, setSingleFile] = useState<UploadFile[]>([]);
  // 多图上传文件列表
  const [multipleFiles, setMultipleFiles] = useState<UploadFile[]>([]);
  // 提交中状态
  const [submitting, setSubmitting] = useState(false);

  // 处理表单提交
  const handleSubmit = async (values: any) => {
    try {
      setSubmitting(true);
      
      // 获取表单数据
      const { title, description } = values;
      
      // 获取单图上传的图片URL
      const singleImageUrl = singleFile[0]?.url || singleFile[0]?.response?.url || '';
      // 获取单图上传的图片URI (不包含域名的路径)
      const singleImageUri = singleFile[0]?.response?.uri || '';
      
      // 获取多图上传的图片URL列表
      const multipleImageUrls = multipleFiles.map(file => file.url || file.response?.url || '');
      // 获取多图上传的图片URI列表
      const multipleImageUris = multipleFiles.map(file => file.response?.uri || '');
      
      // 构建提交数据
      const submitData = {
        title,
        description,
        singleImage: singleImageUri, // 保存不包含域名的URI
        multipleImages: multipleImageUris, // 保存不包含域名的URI数组
      };
      
      console.log('提交数据:', submitData);
      message.success('提交成功');
      
      // 这里可以调用API提交数据
      // await submitData(submitData);
      
    } catch (error) {
      console.error('提交失败:', error);
      message.error('提交失败');
    } finally {
      setSubmitting(false);
    }
  };

  // 重置表单
  const handleReset = () => {
    form.resetFields();
    setSingleFile([]);
    setMultipleFiles([]);
  };

  return (
    <PageContainer title="图片上传示例">
      <Card>
        <Form
          form={form}
          layout="vertical"
          onFinish={handleSubmit}
          initialValues={{
            title: '',
            description: '',
          }}
        >
          <Form.Item
            label="标题"
            name="title"
            rules={[{ required: true, message: '请输入标题' }]}
          >
            <Input placeholder="请输入标题" />
          </Form.Item>
          
          <Form.Item
            label="描述"
            name="description"
          >
            <Input.TextArea rows={4} placeholder="请输入描述" />
          </Form.Item>
          
          <Form.Item label="单图上传">
            <ImageUpload
              value={singleFile}
              onChange={setSingleFile}
              directory="example/single"
              buttonText="上传图片"
              maxCount={1}
            />
            <div style={{ marginTop: 8, color: 'rgba(0, 0, 0, 0.45)' }}>
              支持 .jpg、.jpeg、.png 格式，图片大小不超过10MB
            </div>
          </Form.Item>
          
          <Form.Item label="多图上传">
            <ImageUpload
              value={multipleFiles}
              onChange={setMultipleFiles}
              directory="example/multiple"
              buttonText="上传图片"
              multiple
              maxCount={5}
            />
            <div style={{ marginTop: 8, color: 'rgba(0, 0, 0, 0.45)' }}>
              最多上传5张图片，支持 .jpg、.jpeg、.png 格式，每张图片大小不超过10MB
            </div>
          </Form.Item>
          
          <Divider />
          
          <Form.Item>
            <Space>
              <Button type="primary" htmlType="submit" loading={submitting}>
                提交
              </Button>
              <Button onClick={handleReset}>重置</Button>
            </Space>
          </Form.Item>
        </Form>
      </Card>
      
      <Card title="上传结果" style={{ marginTop: 16 }}>
        <div>
          <h3>单图上传结果:</h3>
          <pre>{JSON.stringify(singleFile, null, 2)}</pre>
        </div>
        
        <Divider />
        
        <div>
          <h3>多图上传结果:</h3>
          <pre>{JSON.stringify(multipleFiles, null, 2)}</pre>
        </div>
      </Card>
    </PageContainer>
  );
};

export default ImageUploadExample;